<template>
  <div>

    <div class="row space-between">

      <div class="row">
        <div class="lssx mr_8"></div>
        <div class="f_16 f_bold">任务详情</div>
      </div>

      <div class="row_a_c cursor" @click="fanghui">
        <div class="mr5">返回</div>
        <img src="../../assets/images/fh.png" style="width: 22px;height: 17px;" />
      </div>

    </div>

    <img class="mt_36" style="width: 100%;height: 60px;" src="../../assets/images/jdt.png" />

    <div class="mt_60 ml_100">
      <div style="color: #737373;" class="f18 ">任务编号:【{{childProp.id}}】</div>
      <div style="color: #737373;" class="f18 mt_30">任务发布者：<span style="color:#FF2812 ;">{{childProp.name}}</span></div>
      <div style="color: #737373;" class="f18 mt_30">任务佣金：<span style="color:#FF2812 ;">{{childProp.price}}元</span>
      </div>
      <div style="color: #737373;" class="f18 mt_30" v-if="childProp.type==1">任务类型：脚本</div>
      <div style="color: #737373;" class="f18 mt_30" v-if="childProp.type==2">任务类型：版本</div>
      <div style="color: #737373;" class="f18 mt_30" v-if="childProp.type==3">任务类型：插件</div>
      <div style="color: #737373;" class="f18 mt_30">任务时间：{{childProp.start_time}}至{{childProp.end_time}}</div>
      <div style="color: #737373;" class="f18 mt_30">剩余时间：<span
          style="color:#FF2812 ;">{{childProp.surplus_data}}天</span></div>
      <div style="color: #737373;width: 500px;" class="f18 mt_30">任务内容：{{childProp.content}}</div>


      <div class="ml_100">
        <div @click="erathia" class="js center mt_50 cursor" v-if="childProp.task_status==1">接受</div>
        <div class="js center mt_50 cursor" v-if="childProp.task_status==2">进行中</div>
        <div class="js center mt_50 cursor" v-if="childProp.task_status==3">已付预付款</div>
        <div class="js center mt_50 cursor" v-if="childProp.task_status==4">用户确认完成</div>
        <div class="js center mt_50 cursor" v-if="childProp.task_status==5">商家确认完成</div>
        <div class="js center mt_50 cursor" v-if="childProp.task_status==6">申请提现</div>
        <div class="js center mt_50 cursor" v-if="childProp.task_status==7">提现成功</div>
        <div class="js center mt_50 cursor" v-if="childProp.task_status==8">已过期</div>
        <div class="js center mt_50 cursor" v-if="childProp.task_status==9">商家投诉</div>
        <div class="js center mt_50 cursor" v-if="childProp.task_status==10">投诉已处理</div>
      </div>
    </div>

    <div v-if="childProp.task_status==2 && childProp.join_user_id == user_id">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left">
        <el-form-item label="" prop="attachment">
          <el-upload :action="upload_url" :on-change="handleChange" :on-success="handleSuccess" :show-file-list="true"
            class="avatar-uploader" :file-list="fileList">
            <el-button size="small" class="mt_50" type="primary">
              <el-icon class="el-icon-plus"></el-icon>
              上传交付文件
            </el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="" prop="screenshot">
          <div class="f_18 ">代码文件截图</div>
          <el-upload :action="upload_url" list-type="picture-card" :on-success="handleChangePho"
            :on-preview="handlePictureCardPreview" :on-remove="handleRemovePho" :file-list="phoFiles">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>

      <div class="center">
        <el-button type="primary" class="mb_20" @click="submitForm">确认完成</el-button>
      </div>
    </div>




  </div>
</template>

<script>
  import * as Task from "@/api/operation/task";
  export default {
    props: {
      childProp: {
        type: Object,
        required: true,
      },
    },
    name: 'Index',
    components: {

    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,

        phoFiles: [],
        fileList: [],
        upload_url: process.env.VUE_APP_BASE_URL + '/file/upload',
        form: {},
        time_value: '',

        // 表单校验
        rules: {
          attachment: [{
            required: true,
            message: "交付文件不能为空",
            trigger: "blur"
          }],
          screenshot: [{
            required: true,
            message: '代码文件截图不能为空',
            trigger: 'change'
          }],
        },
      }
    },
    created() {
      this.user_id = localStorage.getItem('user_id')
    },
    mounted() {

    },
    methods: {

      //接受任务
      erathia() {
        var per = {};
        per.type_pj = 1
        per.id = this.childProp.id
        per.join_user_id = localStorage.getItem('user_id')
        per.join_platform = 'biqi-developer-platform'
        Task.Erathia(per).then(response => {
          this.$modal.msgSuccess("成功");
          this.$emit('fanghui')
        }).catch(() => {
          this.$message.error('失败');
        });
      },

      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            console.log('aaa', this.form)
            this.form.type_pj = 1
            this.form.id = this.childProp.id
            this.form.join_user_id = localStorage.getItem('user_id')
            this.form.join_platform = 'biqi-developer-platform'

            this.loading = true;
            Task.UserCompletion(this.form).then(response => {
              this.$modal.msgSuccess('成功');
              this.$emit('fanghui')
              this.loading = false;
            });
          }
        });
      },



      //图片上传成功调用
      handleChangePho(res, file, fileList) {
        this.phoChange(fileList);
      },

      //图片移出
      handleRemovePho(file, fileList) {
        this.phoChange(fileList);
      },

      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

      // 设置photo值--图片上传拼接数据
      phoChange(fileList) {
        let temp_str = '';
        if (fileList.length > 0) {
          for (let i = 0; i < fileList.length; i++) {
            if (fileList[i].response) {
              if (fileList[i].response.code === 200) {
                if (i === 0) {
                  temp_str += fileList[i].response.data;
                } else {
                  // 最终photo的格式是所有已上传的图片的url拼接的字符串（逗号隔开）
                  temp_str += ',' + fileList[i].response.data;
                }
              }
            }
          }
        }
        // this.form.screenshot = temp_str.split(',');
        this.form.screenshot = temp_str;
      },

      //附件改变
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-1);
      },

      //附件上传成功
      handleSuccess(res) {
        this.$set(this.form, 'attachment', res.data);
      },

      fanghui() {
        this.$emit('fanghui')
      },
      toUrl(url) {
        this.$router.push({
          path: url
        });
      },

    }
  }
</script>




<style lang="scss" scoped>
  .lssx {
    width: 4px;
    height: 24px;
    background: #1A82FB;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
  }

  .js {
    width: 126px;
    height: 34px;
    background: #FFFFFF;
    border: 1px solid #306EF2;
    border-radius: 6px;

    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #306EF2;
  }
</style>
